<template>
    <div class="main">
        <div class="login">
            <div class="login-text">
                L o g i n
            </div>

            <div style="margin-left: 30px;">
                <div style="margin-top: 14px;">
                    <el-tag>账号</el-tag>
                    <el-input style="width: 90%;" v-model="data.account"></el-input>
                </div>
                <div style="margin-top: 14px;">
                    <el-tag>密码</el-tag>
                    <el-input type="password" style="width: 90%;" v-model="data.password"></el-input>
                </div>
                <div style="margin-top: 16px;">
                    <el-button style="width: 90%;" block type="primary" @click="events.login">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElLoading, ElMessage } from 'element-plus';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { set_token } from '@/utils/auth';
import type { login_Data_Dto } from '@/Dto/Request/login';
import { logins } from '@/api/login';
import Api_Code from '@/Dto/Response/Api_code';

import { closeloading, startloading } from '@/utils/loading';
//组合式


const router=useRouter();

const data = reactive<login_Data_Dto>({
    account: '13100252953',
    password: '000000'
})



const events={
   async login(){
      startloading();
      const res= await logins({
        account:data.account,
        password:data.password
      });

      if(res.code===Api_Code.ok){
        closeloading();
        set_token(res.data.toString());
        router.push('/')
      }else{
        ElMessage.error(res.message);
      }
    }
}


</script>

<style scoped>
.main {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

.login {
    width: 350px;
    height: 260px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 8px;
    position: relative;
    top: 180px;
}

.login-text {
    color: #09386e;
    text-align: center;
    border-bottom: 1px solid #eee;
    margin-bottom: 12px;
    font-size: 30px;
    font-weight: 600;
}

body {
    margin: 0;
    padding: 0;
}
</style>